<template>
	<view class="baseForm">
		<!-- tab-bar切换 -->
		<view class="tab-bar">
			<u-tabs
				:current="activeTab"
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					color: '#000',
					fontWeight: 'bold',
					transform: 'scale(1.04)'
				}"
				lineWidth="50px"
				lineHeight="2px"
				lineColor="#007aff"
				@change="changeTab"
			></u-tabs>
		</view>

		<!-- 产品信息 -->
		<view v-if="activeTab === 0" class="">
			<!-- 条码录入 -->
			<view class="upload-scan">
				<scan-bar @code-scanned="getScanResult"></scan-bar>
			</view>

			<!-- 搜索信息 -->
			<view class="search">
				<u-input placeholder="请输入内容" border="surround"></u-input>
				<u-input placeholder="请输入内容" border="surround"></u-input>
				<u-input placeholder="请输入内容" border="surround"></u-input>
				<u-input placeholder="请输入内容" border="surround"></u-input>
			</view>
			<u-line></u-line>
			<!-- 卡片显示 -->
			<view v-if="scanList.length" class="list"></view>
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>

		<!-- 计划信息 -->
		<view v-else class="">
			<view class="info"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { nextTick, ref, watch } from 'vue';
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';

// tab切换功能
interface TabInfo {
	index: number;
	name?: string;
}
const activeTab = ref(0);
const tabList = [{ name: '产品信息' }, { name: '计划信息' }];
function changeTab(val: TabInfo) {
	activeTab.value = val.index;
	if (val.index === 1) {
		getPlanInfo();
	}
}

// 获取扫码结果
function getScanResult(result) {
	console.log('扫码结果', result);
}

const scanList = ref([]);

// 更新计划信息
const mockPlanInfo = {
	name: '王小利',
	sex: '男',
	task: 56,
	status: 1,
	company: '一已生产线',
	time: '2022-06-08'
};
const planInfo = ref(mockPlanInfo);
async function getPlanInfo() {
	// const result = await http({
	// 	method: 'POST',
	// 	url: '/system/login/doLogin',
	// 	data: {}
	// })
	// planInfo.value = result.data;
}
</script>

<style lang="scss" scoped>
.baseForm {
	.tab-bar {
		padding: 0 40px;
	}
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.u-line {
		padding: 10px 0;
	}
	.search {
		display: grid;
		padding: $uni-page-padding;
		margin-top: 10px;
		grid-template-columns: 335rpx 335rpx;
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;
		.u-input {
			border: 1px solid rgba(214, 215, 217, 0.6);
		}
	}
}
</style>
